<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <van-card
        v-for="(item, index) in list"
        :key="item.key"
        :num="item.num"
        :price="item.price * item.num | decimal_price"
        :desc="item.desc"
        :title="item.title"
        :thumb="item.thumb"
      >
        <template #tags>
          <van-tag
          plain
          type="danger"
          v-for="tags in item.tags" 
          :key="tags.key"
          style="margin-left: 1vw;"
          >
            {{ tags.name }}
          </van-tag>
        </template>
        <template #footer>
          <van-checkbox v-model="item.checked" @click="detChecked"></van-checkbox>
          <van-button size="mini" @click="goods_num(index, true)">加1</van-button>
          <van-button size="mini" @click="goods_num(index, false)">减1</van-button>
        </template>
      </van-card>
    </div>
    <van-submit-bar
      button-text="提交订单"
      button-type="dark"
      @submit="onSubmit"
      :price="total_price"
    >
      <van-checkbox v-model="checked" @click="onChecked">全选</van-checkbox>
      <!--
        <van-checkbox v-model="checked" style="margin-right: 5vw;">全选</van-checkbox>
        <div style="margin-right: 5vw;">
          合计：{{ total_price }}
        </div>
      -->
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  // 数据
  data() {
    return {
      checked: null, // 是否在全选1
      goods: {
        max: 10, // 最大购买数
        min: 1, // 最小购买数
      },
      list: [
        {
          list_id: 10001,
          id: 123,
          checked: false, // 选择状态
          title: '商品1',
          thumb: 'https://img.yzcdn.cn/vant/ipad.jpeg',
          desc: '描述',
          price: 0.10,
          num: 6,
          tags: [
            {
              name: '限量',
            },
            {
              name: '特价',
            },
          ],
        },
        {
          list_id: 10005,
          id: 124,
          checked: false,
          title: '商品2',
          thumb: 'https://img.yzcdn.cn/vant/ipad.jpeg',
          desc: '描述2',
          price: 8.00,
          num: 6,
          tags: [
            {
              name: '限量2',
            },
            {
              name: '特价2',
            },
          ],
        },
      ],
    };
  },
  // 方法
  methods: {
    // 返回
    onClickLeft() {
      this.$router.push({ path: '/m/me' });
    },
    // 全部下单
    onSubmit() {
      let athis = this;
      let { length: len } = athis.list;
      let goods = [];
      // 统计商品
      for (let i = 0; i < len; i++) {
        if (athis.list[i].checked === true) {
          goods[i] = [];
          goods[i].id = athis.list[i].id;
          goods[i].num = athis.list[i].num;
        }
      }
      // 操作
      if (goods.length >= 1) {
        console.log(goods, '有商品'); // 所有选中商品
      } else {
        console.log('选中无商品');
      }
    },
    // 商品数量加减
    goods_num(index, way) {
      let athis = this;
      if (way) {
        athis.list[index].num += 1;
        // 超过最大数量
        if (athis.list[index].num >= athis.goods.max) {
          athis.list[index].num = athis.goods.max;
        }
      } else {
        athis.list[index].num -= 1;
        // 低于最小值
        if (athis.list[index].num <= athis.goods.min) {
          athis.list[index].num = athis.goods.min;
          console.log('询问是否删除');
        }
      }
    },
    // 检测是否全选
    detChecked() {
      let athis = this;
      let { length: len } = athis.list;
      let e = 0;
      for (let i = 0; i < len; i++) {
        // 判断数量
        if (athis.list[i].checked === true) {
          e += 1;
          if (e === len) {
            athis.checked = true;
          } else {
            athis.checked = false;
          }
        }
      } 
    },
    // 全选操作
    onChecked() {
      let athis = this;
      let { length: len } = athis.list;
      for (let i = 0; i < len; i++) {
        if (athis.checked === true) {
          athis.list[i].checked = true;
        } else {
          athis.list[i].checked = false;
        }
      }
    },
  },
  // 计算属性
  computed: {
    // 计算价格总和
    total_price() {
      let alist = this.list;
      let price = 0;
      // 计算价格
      for (let i = 0; i < alist.length; i++) {
        price += alist[i].price * alist[i].num;
      }
      price = price.toFixed(2); // 保留两位小数
      price = String(price); // 转字符串
      price = price.replace('.', ''); // 去掉小数点
      price = Number(price); // 转数字
      return price;
    },
  },
  // 过滤器
  filters: {
    // 保留两位小数
    decimal_price(num) {
      return num.toFixed(2);
    },
  },
};
</script>
